<template>
  <view class="recharge-container">
    <!-- 充值金额区域 -->
    <view class="amount-section">
      <text class="section-title">充值金额</text>
      <view class="input-container">
        <text class="currency">¥</text>
        <input
          class="amount-input"
          type="digit"
          placeholder="请输入充值金额"
          v-model="inputAmount"
          placeholder-style="color: #C0C4CC;font-size: 32rpx;"
          @input="formatAmount"
        />
      </view>
      <text class="tips">充值金额需大于0元</text>
    </view>

    <!-- 支付方式选择 -->
    <view class="payment-section">
      <text class="section-title">支付方式</text>
      <view class="payment-methods">
        <label 
          class="method-item" 
          v-for="(item, index) in paymentMethods" 
          :key="index"
          @click="selectedMethod = item.value"
        >
          <view class="method-content">
            <uni-icons :type="item.icon" size="40" class="method-icon"></uni-icons>
            <text class="method-text">{{ item.text }}</text>
          </view>
          <view class="check-icon" :class="{ 'checked': selectedMethod === item.value }">
            <uni-icons type="checkmarkempty" size="30" color="#fff"></uni-icons>
          </view>
        </label>
      </view>
    </view>

    <!-- 确认支付按钮 -->
    <view class="btn-container">
      <button class="confirm-btn" @click="handlePay">确认支付</button>
    </view>

    <!-- 充值须知 -->
    <view class="notice-section">
      <view class="notice-header">
        <uni-icons type="info" size="30" color="#606266"></uni-icons>
        <text class="notice-title">充值须知</text>
      </view>
      <view class="notice-content">
        <text>1. 目前支持支付宝和微信支付充值，后续增加其他方法会及时公告通知大家。</text>
        <text>2. 充值无最低额度限制，请根据发布任务的单价和数量确定充值金额，账号余额可提现，但会收取一定手续费，详情请参考【发布规则】和【用户协议】。</text>
        <text>3. 充值提现手续费说明：非会员收取5%，会员收取1%；</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 支付方式配置
const paymentMethods = ref([
  { value: 'wechat', icon: 'weixin', text: '微信支付' },
  { value: 'alipay', icon: 'alipay', text: '支付宝' }
]);

// 绑定选中的支付方式
const selectedMethod = ref('wechat'); 

// 绑定输入的金额
const inputAmount = ref(''); 

// 格式化金额输入
const formatAmount = () => {
  // 限制只能输入数字和小数点
  inputAmount.value = inputAmount.value.replace(/[^\d.]/g, '');
  // 确保只有一个小数点
  const dotIndex = inputAmount.value.indexOf('.');
  if (dotIndex !== -1) {
    inputAmount.value = inputAmount.value.substring(0, dotIndex + 3);
  }
};

// 确认支付逻辑
const handlePay = () => {
  if (!inputAmount.value || Number(inputAmount.value) <= 0) {
    uni.showToast({
      title: '请输入有效的充值金额',
      icon: 'none',
      duration: 2000
    });
    return;
  }

  if (selectedMethod.value === 'wechat') {
    console.log('选择微信支付，金额：', inputAmount.value);
    // 调用微信支付SDK
  } else {
    console.log('选择支付宝支付，金额：', inputAmount.value);
    // 调用支付宝支付SDK
  }
};
</script>

<style lang="less" scoped>
.recharge-container {
  background-color: #F5F7FA;
  min-height: 100vh;
  
  /* 原header相关样式删除 */
  
  .section-title {
    font-size: 32rpx;
    color: #606266;
    margin-bottom: 24rpx;
    padding-left: 30rpx;
  }
  
  /* 充值金额区域 */
  .amount-section {
    margin-top: 20rpx;
    background-color: #fff;
    padding: 40rpx 0;
    
    .input-container {
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      
      .currency {
        font-size: 48rpx;
        color: #303133;
        margin-right: 20rpx;
      }
      
      .amount-input {
        flex: 1;
        font-size: 48rpx;
        color: #303133;
        height: 60rpx;
        line-height: 60rpx;
        padding: 0;
      }
    }
    
    .tips {
      font-size: 28rpx;
      color: #909399;
      margin-top: 20rpx;
      padding-left: 30rpx;
    }
  }
  
  /* 支付方式选择 */
  .payment-section {
    margin-top: 20rpx;
    background-color: #fff;
    padding: 40rpx 0;
    
    .payment-methods {
      .method-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx;
        border-bottom: 1rpx solid #EBEEF5;
        
        &:last-child {
          border-bottom: none;
        }
        
        .method-content {
          display: flex;
          align-items: center;
          
          .method-icon {
            color: #FF3B30;
            margin-right: 20rpx;
          }
          
          .method-text {
            font-size: 32rpx;
            color: #303133;
          }
        }
        
        .check-icon {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          border: 2rpx solid #EBEEF5;
          display: flex;
          align-items: center;
          justify-content: center;
          
          &.checked {
            background-color: #FF3B30;
            border-color: #FF3B30;
          }
        }
      }
    }
  }
  
  /* 确认支付按钮 */
  .btn-container {
    padding: 60rpx 30rpx 0;
    
    .confirm-btn {
      width: 100%;
      height: 96rpx;
      line-height: 96rpx;
      border-radius: 48rpx;
      background: linear-gradient(90deg, #FF512F 0%, #DD2476 100%);
      color: #fff;
      font-size: 36rpx;
      font-weight: 500;
      box-shadow: 0 10rpx 20rpx rgba(255, 59, 48, 0.2);
    }
    
    .confirm-btn:active {
      opacity: 0.9;
      transform: scale(0.99);
      transition: all 0.2s;
    }
  }
  
  /* 充值须知 */
  .notice-section {
    margin: 60rpx 30rpx 0;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
    
    .notice-header {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      .notice-title {
        font-size: 32rpx;
        color: #303133;
        font-weight: 500;
        margin-left: 10rpx;
      }
    }
    
    .notice-content {
      font-size: 28rpx;
      color: #606266;
      line-height: 1.8;
      
      text {
        display: block;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>